<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,body {
                height: 100%;
                background-color: #f4f5f6;
               
            }
            .conter {
                width:100%;
                box-sizing: border-box;
                padding:0 12px;
            }
            .title {
                width:100%;
                height:32px;
                line-height: 32px;
                font-size: 15px;
                color:#222;
                margin:17px 0 7px;
                position:relative;
            }
            .r {
                width:55px;
                height: 23px;
                line-height: 23px;
                text-align: center;
                font-size: 13px;
                color:#f85959;
                border:1px solid #f85959;
                border-radius: 12px;
                position:absolute;
                top:2px;
                right:0;
            }
            .box {
                width:100%;
                height:32px;
                margin-bottom: 5px;
            }
            .text {
                float:left;
                width:22.5%;
                height:30px;
                line-height: 30px;
                text-align: center;
                font-size:14px;
                color:#222;
                border:1px solid #e8e8e8;
                background-color: #fff;
                margin-right: 7px;
            }
            .last {
                margin-right: 0;
            }
            .more {
                border: 1px dashed #f85959;
                color:#f85959;
                margin-bottom: 60px;   
            }
            .color {
                color:#f85959;
            }
            
        </style>
    </head>

    <body>
        <div class="conter">
        <div class="title">我的频道<div class="r">编辑</div></div>
        <div class="box">
            <div class="text color">推荐</div>
            <div class="text">热点</div>
            <div class="text">视频</div>
            <div class="text last">北京</div>
        </div>
        <div class="box">
            <div class="text">社会</div>
            <div class="text">科技</div>
            <div class="text">订阅</div>
            <div class="text last">娱乐</div>
        </div>
        <div class="box">
            <div class="text">图片</div>
            <div class="text">体育</div>
            <div class="text">财政</div>
            <div class="text last">汽车</div>
        </div>
        <div class="box">
            <div class="text">军事</div>
            <div class="text">国际</div>
            <div class="text">段子</div>
            <div class="text last">趣图</div>
        </div>
        <div class="box">
            <div class="text">美女</div>
            <div class="text">健康</div>
            <div class="text">正能量</div>
            <div class="text last">特卖</div>
        </div>
        <div class="box">
            <div class="text">政务</div>
            <div class="text">教育</div>
            <div class="text">育儿</div>
            <div class="text last">电影</div>
        </div>
        <div class="box">
            <div class="text">星座</div>
            <div class="text">美食</div>            
        </div>
        <div class="title">频道推荐</div>
        <div class="box">
            <div class="text">精选</div>
            <div class="text">房产</div>
            <div class="text">数码</div>
            <div class="text last">时尚</div>
        </div>
        <div class="box">
            <div class="text">游戏</div>
            <div class="text">养生</div>
            <div class="text">旅游</div>
            <div class="text last">辟谣</div>
        </div>
        <div class="box">
            <div class="text">历史</div>
            <div class="text">探索</div>
            <div class="text">故事</div>
            <div class="text last">美文</div>
        </div>
        <div class="box">
            <div class="text">情感</div>
            <div class="text">家具</div>
            <div class="text">搞笑</div>
            <div class="text last">文化</div>
        </div>
        <div class="box">
            <div class="text">三农</div>
            <div class="text">收藏</div>
            <div class="text">问答</div>
            <div class="text last">语录</div>
        </div>
        <div class="box">
            <div class="text more">更多频道</div>
        </div>
        </div>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnReady();
        };
    </script>

</html>
